<template>
	<view class="">
		<view class="box">
			<view class="title">
				提现金额
			</view>
			<view class="pricebox">
				<view class="dw">
					￥
				</view>
				<input type="text" v-model="price" value="" placeholder="请输入提现金额" />
			</view>
			<view class="ktxbox">
				<view class="ktx">
					可提现余额：{{money}}
				</view>
				<view class="bothtx" @click="bothtx">
					全部提现
				</view>
			</view>
			<view class="txsq" @click="tixian">
				提现申请
			</view>
		</view>
		<view class="hr">

		</view>
		<view class="boxs">
			<view class="title">
				提现记录
			</view>
			<view class="biaoti">
				<view class="">
					申请金额
				</view>
				<view class="">
					申请时间
				</view>
				<view class="">
					转态
				</view>
			</view>
			<view class="order" v-for="(item,index) in list" :key="index">
				<view class="listbox">
					<view class="price">
						{{item.money}}
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
					<view class="title" style="color: #FF9900;" v-if="item.status==1">
						审核中
					</view>
					<view class="title" style="color: #666666;" v-if="item.status==2">
						提现成功
					</view>
					<view class="title" style="color: #D01717;" v-if="item.status==3">
						提现驳回
					</view>
				</view>
				<view class="" v-if="item.reason!=''">
					<view class="lookyy" @click="dinji(item.flag,index)">
						<text class="til">{{item.flag?'收起':'查看原因'}}</text><text :class="item.flag?'angles':'angle'"></text>
					</view>
					<!-- <view class="">
						收起<text class="angles"></text>
					</view> -->
					<view class="neir" v-if="item.flag">
						{{item.reason}}
					</view>
				</view>
				
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getwithdrawallist,
		getusermoney,
		withdrawal
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				page: 0,
				limit: 20,
				flag: false,
				list: [],
				money:0.00,
				price:null
			}
		},
		methods: {
			public() {
				if (this.flag) {
					uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 2000
					})
				}
				this.page++
				let data = {
					page: this.page,
					limit: this.limit
				}
				getwithdrawallist(data).then(res => {
					let arr=res.data.map(v=>{
						v.flag=false
						return v
					})
					this.list = this.list.concat(arr)
					if (res.data.length < this.limit) {
						this.flag = true
					}
				})
			},
			dinji(v,i){
				// console.log(v)
				this.list[i].flag=!this.list[i].flag
			},
			pricepublic(){
				getusermoney().then(res=>{
					this.money=res.data.money
				})
			},
			// 全部提现
			bothtx(){
				this.price=this.money
			},
			// 提现
			tixian(){
				let that=this
				uni.showLoading({
					title:"提现中",
					mask:true
				})
				withdrawal({money:this.price}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:"success",
						duration:2000
					})
					setTimeout(function(){
						that.page=0
						that.flag=false
						that.list=[]
						that.public()
						that.pricepublic()
						that.price=null
					},2000)
					
				})
			}
		},
		onShow() {
			this.public()
			this.pricepublic()
		},
		onReachBottom() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background: #FFFFFF;
		padding: 43rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.pricebox {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #000000;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin-top: 61rpx;

			.dw {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}

		.ktxbox {
			margin-top: 25rpx;
			display: flex;
			justify-content: space-between;

			.ktx {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}

			.bothtx {
				width: 163rpx;
				height: 48rpx;
				border-radius: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CC0000;
				background-color: #FFE5E5;
			}
		}

		.txsq {
			width: 710rpx;
			margin: 0 auto;
			line-height: 86rpx;
			border-radius: 86rpx;
			height: 86rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background-color: #FF3333;
			margin-top: 53rpx;
		}
	}

	.hr {
		width: 100%;
		height: 15rpx;
		background: #E3E3E3;
	}

	.boxs {
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #000000;
		}

		.biaoti {
			display: flex;
			justify-content: space-around;
			border-bottom: 2rpx solid #ededed;
			margin-top: 60rpx;
			font-family: MicrosoftYaHei;
			font-size: 26rpx;
			color: #000000;
		}

		.listbox {
			display: flex;
			margin-top: 40rpx;
			margin-left: 20rpx;

			.price {
				text-align: center;
				width: 187rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FF3300;
			}

			.time {
				text-align: center;
				width: 345rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.title {
				text-align: center;
				width: 97rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
			}
		}
	}

	.lookyy {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #626262;
		// text-align: center;
		display: flex;
		align-items: center;
		margin-left: 300rpx;
		.til{
			height: 20rpx;
			line-height: 20rpx;
		}

		.angle {
			width: 10rpx;
			height: 10rpx;
			line-height: 10rpx;
			border-top: 1px solid #000;
			border-left: 1px solid #000;
			transform: rotate(225deg);
			display: inline-block;
			margin-left: 10rpx;
		}
		.angles{
			width: 10rpx;
			height: 10rpx;
			line-height: 10rpx;
			border-top: 1px solid #000;
			border-left: 1px solid #000;
			transform: rotate(45deg);
			display: inline-block;
			margin-left: 10rpx;
		}
	}

	.neir {
		width: 709rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 30rpx;
		font-weight: 500;
		padding: 20rpx;
		box-sizing: border-box;
		color: #333333;
		background: #EDEDED;
		border-radius: 5rpx;
	}
</style>
